import mesop as me

@me.stateclass
class State:
    current_image: int

def next_image(e: me.ClickEvent):
    state = me.state(State)
    state.current_image = (state.current_image + 1) % len(images)

def prev_image(e: me.ClickEvent):
    state = me.state(State)
    state.current_image = (state.current_image - 1) % len(images)

images = [
    "https://picsum.photos/id/1018/800/400",
    "https://picsum.photos/id/1015/800/400",
    "https://picsum.photos/id/1019/800/400",
]

@me.page()
def image_carousel():
    state = me.state(State)
    
    with me.box(style=me.Style(display="flex", flex_direction="column", align_items="center", gap=16)):
        me.text("Image Carousel", type="headline-4")
        
        with me.box(style=me.Style(position="relative", width=800, height=400, border_radius=8, overflow_x="hidden")):
            me.image(src=images[state.current_image], alt=f"Image {state.current_image + 1}", 
                     style=me.Style(width="100%", height="100%"))
            
            with me.box(style=me.Style(position="absolute", top=0, left=0, right=0, bottom=0, 
                                       display="flex", justify_content="space-between", align_items="center", 
                                       padding=me.Padding.all(16))):
                me.button("Previous", on_click=prev_image, type="flat", 
                          style=me.Style(background=me.theme_var("surface"), color=me.theme_var("on-surface"), 
                                         border_radius=20, padding=me.Padding.symmetric(horizontal=16, vertical=8)))
                me.button("Next", on_click=next_image, type="flat", 
                          style=me.Style(background=me.theme_var("surface"), color=me.theme_var("on-surface"), 
                                         border_radius=20, padding=me.Padding.symmetric(horizontal=16, vertical=8)))
        
        me.text(f"Image {state.current_image + 1} of {len(images)}", type="body-1")